<template>
	<view class="contents">
		<view class="totalcommission">
			累计佣金(元):{{commissiondata.sum_spread}}
		</view>
		<view class="promote_data">
			<view class="left" @click="queryList(0)">
				<view class="dname" >
					一级推广佣金
				</view>
				<view class="dnum" style="color:#1AB374 ;">
					{{commissiondata.spread_one}}
				</view>
			</view>
		    <view class="fengexian">
		    	
		    </view>
			<view class="right" @click="queryList(1)">
				<view class="dname" >
					二级推广佣金
				</view>
				<view class="dnum">
					{{commissiondata.spread_two}}
				</view>
			</view>
		</view>
		<view style="height: 28rpx;"></view>
		<view class="mingxi" v-for="(item,index) in commissiondetaillist" :key="index">
			<view class="userinfo">
				<view class="uname">
					{{item.title}}
				</view>
				<view class="promotetime">
					{{item.add_time}}
				</view>
			</view>
			<view class="reward">
				+{{item.number}}元
			</view>
		</view>
		<view style="text-align: center;" v-if="status">
			暂无更多数据
		</view>
	</view>
</template>

<script>
	import {
		commissionSubsidiary,
		commissionDetailsList
	} from '@/api/api.js'
	export default {
		data() {
			return {
				commissiondata: {},  //佣金明细
				commissiondetaillist:[],   //佣金明细列表
				total:'',//总佣金列表数     
				page:1,
				pages:'',
				type:0,
				status:false
			}
		},
		onLoad() {
			// 佣金明细
			commissionSubsidiary().then(res => {
				if(res.data.code=='200') {
					this.commissiondata = res.data.data
				}
			}),
			// 佣金明细列表
			this.commissionDetailsList()
			
		},
		onReachBottom() {
			// console.log(this.total)
			// console.log(this.commissiondetaillist.length)
			this.page = this.page + 1
			uni.showLoading({
				title: '加载中'
			});
			let time = setTimeout(() => {
				let data = `page=${this.page}&limit=10&type=${this.type}`
				commissionDetailsList(data).then(res => {
					if (res.data.code == '200'&&res.data.data.data.length!=0) {
						uni.hideLoading()
						this.commissiondetaillist.push(...res.data.data.data[0].list)
						this.pages = res.data.data.page
					} else {
						uni.showToast({
							title:'没有更多数据了',
							icon:'error',
							duration:1500
						})
					}
				})
				clearTimeout(time)
			}, 1500)
		},
		methods: {
			// 佣金明细列表
			commissionDetailsList(type) {
				this.type = type
				let data = `page=1&limit=10&type=${this.type}`
				commissionDetailsList(data).then(res => {
					console.log(res)
					if(res.data.code=='200' && res.data.data.data.length!=0) {
						this.status = false
						this.commissiondetaillist = res.data.data.data[0].list
						this.pages = res.data.data.page
						// console.log(this.pages)
					}
					else if(res.data.code=='200' && res.data.data.data.length==0) {
						this.status = true
					}
				})
			},
			// 切换级别
			queryList(index) {
				this.commissiondetaillist = []
				this.commissionDetailsList(index)
			},
			
			
		}
	}
</script>

<style lang="scss">
   .contents {
	   width: 100%;
	   min-height: 100vh;
	   background-color: rgb(245, 245, 245);
	   background-image: linear-gradient(180deg, #1AB374 100rpx, #F7F9FC 240rpx);
	   padding-top: 100rpx;
	   box-sizing: border-box;
	   .totalcommission {
		   color: #fff;
		   margin-left: 28rpx;
		   margin-bottom: 28rpx;
		   font-size: 32rpx;
	   }
	   .promote_data {
	   	width: 694rpx;
	   	margin: 0 auto;
	   	background-color: #fff;
	   	border-radius: 10rpx;
	   	display: flex;
	   	justify-content: space-between;
	   	align-items: center;
	   	.left,.right {
	   		text-align: center;
	   		width: 50%;
	   		height: 120rpx;
	   		display: flex;
	   		flex-direction: column;
	   		align-items: center;
	   		justify-content: center;
	   		.dname {
	   			color: #999;
	   			font-size: 26rpx;
	   		}
	   		.dnum {
				margin-top: 12rpx;
	   			font-weight: 600;
	   			font-size: 40rpx;
	   		}
	   	}
	   	.fengexian {
	   		width: 1px;
	   		height: 50rpx;
	   		background-color: #999;
	   	}
	   }
	   .mingxi {
		   width: 694rpx;
		   margin: 0 auto 12rpx;
		   background-color: #fff;
		   border-radius: 10rpx;
		   display: flex;
		   justify-content: space-between;
		   align-items: center;
		   box-sizing: border-box;
		   padding: 28rpx;
		   .userinfo {
			   .promotetime {
				   margin-top: 12rpx;
				   color: #999;
				   font-size: 24rpx;
			   }
		   }
		   .reward {
			   color: #ED742E;
			   font-weight: 600;
			   font-size: 36rpx;
		   }
	   }
   }
</style>
